<template>
    <div class="collect" v-if="resData.length != 0">
        <van-row>
            <van-col :span="18">
                <div class="collect-title">竞争优势</div>
                <p class="collect-text">应付预收 - 应收预付</p>
                <p class="collect-price">¥{{ resData[resData.length - 1].diff }}<span class="rmb">万</span></p>
            </van-col>
            <van-col :span="6">
                <div class="compete" v-if="resData[resData.length - 1].contend == 0">
                    <img :src="IMG_URL + '/up.png'" style="width: 42px;"/>
                    <span class="compete-you">优势</span>
                </div>
                <div class="compete" v-if="resData[resData.length - 1].contend == 1">
                    <img :src="IMG_URL + '/down.png'" style="width: 42px;"/>
                    <span class="compete-ruo">弱</span>
                </div>

            </van-col>
        </van-row>
        <div class="collect-group" @click="onClick()">
            <div class="collect-group-label">
                <p>判断标准：</p>
                <p>数字越大，公司的竞争优势越强</p>
            </div>
            <div class="collect-group-text">
                查看5年趋势
                <div class="triangle"></div>
            </div>
        </div>


        <!--弹出开始-->
        <van-popup v-model="show" :style="{ height: '60%',width: '90%' }" closeable round>
            <div class="popup-container">
                <div class="popup-container-title">竞争优势</div>

                <!--<div class="tag-group">
                    <span class="tag-box-2 tag-1"></span>
                    <div class="tag-group-text">(应收帐款+合同资产)占总资产的比例</div>
                </div>-->


                <div id="Chart3-popup" :style="{width: '100%', height: '300px'}"></div>
                <div class="popup-container-group">
                    <div v-for="(item,index) in resData" :key="index" :class="item.contend == 1 ? 'cha':'you'">{{ item.contend == 1 ? '差': '优' }}</div>
                </div>
            </div>

        </van-popup>
        <!--弹出结束-->
    </div>
</template>

<script>

    import {contend} from "../../api/index";

    export default {
        name: "echart3",
        data() {
            return {
                show: false,
                resData: [],
                yearArr: [],
                diffArr: [],
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            async init() {
                let tscode = this.$route.query.tscode;

                await contend(tscode).then(res => {
                    this.resData = res;

                    let yearArr = [];
                    let diffArr = [];

                    res.forEach(item => {
                        yearArr.push(item.year);
                        diffArr.push(parseFloat(item.diff.toFixed(2)));
                    });

                    this.yearArr = yearArr;
                    this.diffArr = diffArr;

                })
            },
            onClick() {
                this.show = true;

                let option = {
                    color: '#6467F0',
                    /*legend: {
                        data: ['期间费用率/毛利率'],
                        left: '0',
                        top: '0',
                        textStyle: {
                            color: '#333',
                        }
                    },*/
                    grid: {
                        x: '70',
                        y: '20'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.yearArr
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}万'
                        },
                        axisLine:{
                            lineStyle: {
                                color: '#999999'
                            }
                        }
                    },
                    series: [
                        {
                            name: '期间费用率/毛利率',
                            data: this.diffArr,
                            type: 'line',
                            itemStyle: {
                                color: '#6467F0'
                            },
                            lineStyle: {
                                normal: {
                                    color: '#6467F0'
                                }
                            },
                            areaStyle: {
                                color: '#6467F0',
                                opacity: 0.1
                            }
                        }
                    ]
                };

                this.$nextTick(() => {
                    let Chart = this.$echarts.init(document.getElementById('Chart3-popup'));
                    Chart.setOption(option);
                });
            }
        }

    }
</script>

<style scoped lang="less">
    .popup-container {
        width: calc(100% - 24px);
        overflow-x: hidden;
        padding: 20px 12px 0 12px;
        text-align: left;

        .popup-container-title {
            font-size: 18px;
            padding-bottom: 28px;
        }

        .popup-container-group {
            width: 68%;
            position: relative;
            top: -42px;
            left: 70px;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            justify-items: center;
            font-size: 13px;
            color: #333333;
            text-align: center;
        }
    }

    .collect {
        display: flex;
        flex-direction: column;

        .collect-title {
            font-size: 18px;
            font-weight: 500;
            color: #333333;
            text-align: left;
            padding-bottom: 24px;
            padding-top: 24px;
        }

        .collect-text {
            text-align: left;
            font-size: 12px;
            font-weight: 400;
            color: #333333;
        }

        .collect-price {
            margin-top: 8px;
            text-align: left;
            font-size: 30px;
            font-weight: bold;
            color: #333333;

            .rmb{
                font-size: 16px;
                color: #666666;
                font-weight: 500;
                margin-left: 4px;
            }
        }

        .compete {
            text-align: right;
            position: relative;
            top: 11px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 14px;
            font-weight: 500;

            .compete-you {
                position: relative;
                top: 5px;
                color: #05AD80;
                margin-left: 1px;
            }

            .compete-ruo {
                position: relative;
                top: 0;
                color: #E62C3B;
                margin-left: 2px;
            }
        }



    }
</style>
